<!-- 分类组件 -->
<template>
  <view
    class="category-area dflex dflex-wrap-w"
    v-if="props.categoryDatas && props.categoryDatas.length > 0"
  >
    <scroll-list
      :rows="rows"
      :styleType="styleType"
      :lL="props.categoryDatas.length"
      :isScroll="isScroll"
    >
      <view
        class="icons-box dflex dflex-flow-c"
        v-for="(item, index) in props.categoryDatas"
        :key="index"
      >
        <a
          :title="item.name"
          href="#"
          @click="topage(item)"
          :class="index == props.categoryDatas.length - 1 ? 'margin-right-xs2' : ''"
        >
          <image :lazy-load="true" :src="item.img" />
          <text class="tac clamp icons-text">{{ item.name }}</text>
        </a>
      </view>
    </scroll-list>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { url_params } from '@/utils';
  import { ImageModel } from '@/services/model/homeModel';
  import ScrollList from '@/components/common/scroll-list.vue';
  import { router } from '@/utils/router';

  const props = defineProps({
    categoryDatas: {
      type: Array<ImageModel>,
      default: () => [],
    },
  });
  // rows控制显示的行数
  const rows = ref<number>(2);
  // 1：横向排列 2：横向纵数据排列
  const styleType = ref<number>(2);
  // styleType为1时，控制是否显示滚动条
  const isScroll = ref<boolean>(true);

  // 点击跳转页面
  const topage = (item: ImageModel) => {
    router.push(
      item.url +
        url_params({
          id: item.id,
          type: item.type,
        }),
    );
  };
</script>

<style lang="scss">
  .category-area {
    a {
      text-decoration: none;
      line-height: 1;
    }

    image {
      width: 120rpx;
      height: 96rpx;
    }
  }

  .icons-box {
    padding-left: 20rpx;
    box-sizing: border-box;
    margin-bottom: 10rpx;
  }
  .icons-text {
    color: #666666;
  }
</style>
